import React from "react";
import Ionicons from 'react-native-vector-icons/Ionicons';
import { useDispatch, useSelector } from "react-redux";
import { Button } from "@ant-design/react-native";
import { Dimensions } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Draggable } from "@/components/Draggable";
import { RootState } from "@/stores";
import { setTheme } from "@/stores/features/themeSlice";

const btnSize = 46;
const margin = 24;

export const ThemeToggleButton = () => {
  const dispatch = useDispatch();
  const theme = useSelector((state: RootState) => state.theme.theme);
  const insets = useSafeAreaInsets();
  const { width, height } = Dimensions.get("window");

  return (
    <Draggable
      initialPosition={{
        x: width - btnSize - margin - insets.right,
        y: height - btnSize - margin - insets.bottom,
      }}
      style={{
        position: "absolute",
        zIndex: 10,
      }}
    >
      <Button
        style={{
          width: btnSize,
          height: btnSize,
          borderRadius: btnSize / 2,
          
        }}
        onPress={() => dispatch(setTheme(theme === "dark" ? "light" : "dark"))}
      >
        <Ionicons
          style={{
            width: btnSize,
            textAlign: "center",
          }}
          name={theme === "dark" ? "bulb" : "eye"}
          color="#131313"
          size={22}
        />
      </Button>
    </Draggable>
  );
};
